<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>基于vue-router的案例</title>
  <!-- 引入vue文件 -->
  <script src="./lib/vue_2.5.22.js"></script>
  <script src="./lib/vue-router_3.0.2.js"></script>
  <style type="text/css">
    html,
    body,
    #app {
      margin: 0;
      padding: 0px;
      height: 100%;
    }

    .header {
      height: 50px;
      background-color: #545c64;
      line-height: 50px;
      text-align: center;
      font-size: 24px;
      color: #fff;
    }

    .footer {
      height: 40px;
      line-height: 40px;
      background-color: #888;
      position: absolute;
      bottom: 0;
      width: 100%;
      text-align: center;
      color: #fff;
    }

    .main {
      display: flex;
      position: absolute;
      top: 50px;
      bottom: 40px;
      width: 100%;
    }

    .content {
      flex: 1;
      text-align: center;
      height: 100%;
    }

    .left {
      flex: 0 0 20%;
      background-color: #545c64;
    }

    .left a {
      color: white;
      text-decoration: none;
    }

    .right {
      margin: 5px;
    }

    .btns {
      width: 100%;
      height: 35px;
      line-height: 35px;
      background-color: #f5f5f5;
      text-align: left;
      padding-left: 10px;
      box-sizing: border-box;
    }

    button {
      height: 30px;
      background-color: #ecf5ff;
      border: 1px solid lightskyblue;
      font-size: 12px;
      padding: 0 20px;
    }

    .main-content {
      margin-top: 10px;
    }

    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    ul li {
      height: 45px;
      line-height: 45px;
      background-color: #a0a0a0;
      color: #fff;
      cursor: pointer;
      border-bottom: 1px solid #fff;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    td,
    th {
      border: 1px solid #eee;
      line-height: 35px;
      font-size: 12px;
    }

    th {
      background-color: #ddd;
    }
  </style>
</head>

<body>
  
  <div id="app">
        <!-- 路由占位符 -->
        <router-view></router-view>
  </div>
  <script>
      //创建路由组件
      var  App = {
        template:`
        <div>
            <!-- 头部区域 -->
            <header class="header">传智后台管理系统</header>
            <!-- 中间主体区域 -->
            <div class="main">
              <!-- 左侧菜单栏 -->
              <div class="content left">
                <ul>
                  <li><router-link to='/users'>用户管理</router-link></li>
                  <li><router-link to='/rights'>权限管理</router-link></li>
                  <li><router-link to='/goods'>商品管理</router-link></li>
                  <li><router-link to='/orders'>订单管理</router-link></li>
                  <li><router-link to='/setting'>系统设置</router-link></li>
                </ul>
              </div>
              <!-- 右侧内容区域 -->
              <div class="content right">
                <div class="main-content"><router-view /></div>
              </div>
            </div>
            <!-- 尾部区域 -->
            <footer class="footer">版权信息</footer>
        </div>
        `
      }
      var Users = {
        data(){
          return{
            userlist:[
              { id: 1, name: '张三', age: 10 },
              { id: 2, name: '李四', age: 20 },
              { id: 3, name: '王五', age: 30 },
              { id: 4, name: '赵六', age: 40 }
            ]
          }
        },
        methods:{
          goRegister(id){
            this.$router.push('usersinfo' + id)
          }
        },
        template:`
          <div>
            <h1>用户管理</h1>
            <table>
              <thead>
                <tr><th>编号</th><th>姓名</th><th>年龄</th><th>操作</th></tr> 
              </thead>
              <tbody>
                <tr v-for = 'item in userlist' :key = 'item.id'>
                  <td>{{item.id}}</td>
                  <td>{{item.name}}</td>
                  <td>{{item.age}}</td>
                  <td><a href="javascript:;" @click = 'goRegister(item.id)'>详情</a></td>
                </tr>  
              </tbody>
            </table>  
            
          </div>
          
        `
      }
      var Rights = {
        template:`
          <div><h1>权限管理</h1></div>
        `
      }
      var Goods = {
        template:`
          <div><h1>商品管理</h1></div>
        `
      }
      var Orders = {
        template:`
          <div><h1>订单管理</h1></div>
        `
      }
      var Setting = {
        template:`
          <div><h1>系统设置</h1></div>
        `
      }
      var Usersinfo = {
        props:['id'],
        methods:{
          goback(){
            this.$router.go(-1)
          }
        },
        template:`
          <div>
            <h3>用户详情---用户id为{{id}}</h3>
            <button @click='goback()'>后退</button>  
          </div>
        `
      }
      //配置路由规则并创建路由实例
      var router = new VueRouter({
        routes:[
          {
            path:'/',
            component:App,
            redirect:'/users',
            children:[
              {path:'/users',component:Users},
              {path:'/usersinfo:id',component:Usersinfo,props:true},
              {path:'/rights',component:Rights},
              {path:'/goods',component:Goods},
              {path:'/orders',component:Orders},
              {path:'/setting',component:Setting}
          ]}
        ]
      })
      var vm = new Vue({
        el: '#app',
        data:{},
        router
      })
  </script>
</body>

</html>